.cm-teleport-box {
    display: flex;
    flex-direction: row;
    background-color: var(--cui-color-bg-1);
    border: 1px solid var(--cui-color-border);
    border-radius: var(--cui-border-radius-medium);
    min-width: 402px;
    height: 400px;
    position: relative;

    &.cm-teleport-box--disabled {
        opacity: 0.5;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            border-radius: var(--cui-border-radius-medium);
            background-color: var(--cui-color-disabled-fill);
            cursor: not-allowed;
        }
    }
}

.cm-teleport-left {
    width: 50%;
    border-right: 1px solid var(--cui-color-border);
    display: flex;
    flex-direction: column;
}

.cm-teleport-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cm-teleport-filter {
    margin: 12px 12px 8px;
}

.cm-teleport-header {
    margin: 12px 12px 0;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    align-items: center;
    height: 24px;
}

.cm-teleport-right-header {
    margin-bottom: 12px;
}

.cm-teleport-header-total {
    color: var(--cui-color-text-2);
}

.cm-teleport-clear,
.cm-teleport-select-all {
    margin-left: 12px;
}

.cm-teleport-right-list,
.cm-teleport-left-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.cm-teleport-left-list {
    .cm-checkbox {
        width: 100%;
        min-height: 36px;
        padding-left: 12px;
        transition: all 0.2s linear;

        &:hover {
            background-color: var(--cui-color-fill-0);
        }
    }
}

.cm-teleport-group-title {
    min-height: 28px;
    padding-left: 12px;
    color: var(--cui-color-text-1);
    display: inline-flex;
    align-items: center;
    transition: all 0.2s linear;
    font-size: 12px;

    &:hover {
        background-color: var(--cui-color-fill-0);
    }
}

.cm-teleport-right-list {
    .cm-teleport-right-item {
        width: 100%;
        min-height: 36px;
        padding-left: 12px;
        padding-right: 12px;
        transition: all 0.2s linear;
        display: flex;
        cursor: default;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        &:hover {
            background-color: var(--cui-color-fill-0);

            .cm-teleport-right-item-close {
                opacity: 1;
                pointer-events: all;
            }
        }
    }

    .cm-teleport-right-item-close {
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
        transition: all 0.2s linear;
    }
}